{% load static compress thumbnail %}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}赞乎{% endblock title %}</title>
    <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}">
    <meta name="description" content="赞乎问答社区">
    <meta name="author" content="__Csm__">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->

    {% compress css %}
        <!-- Latest compiled and minified Bootstrap 4 beta CSS -->
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <!-- Your stuff: Third-party CSS libraries go here -->
        <link rel="stylesheet" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
        <!-- This file stores project-specific CSS -->
        <link rel="stylesheet" href="{% static 'css/zanhu.css' %}">
        {% block css %}{% endblock css %}
    {% endcompress %}

</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm bg-light">
    <div class="container">
        <a class="navbar-brand" href="{% url 'news:list' %}">赞 乎&nbsp;&nbsp;</a>
{#        <a class="navbar-brand" href="#">赞 乎&nbsp;&nbsp;</a>#}
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainMenu">

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="btn-sm" href="{% url 'notifications:latest_notifications' %}" id="notifications" data-toggle="popover" data-title="通知">
                        <i class="fa fa-bell-o" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>&nbsp;&nbsp;

            <ul class="navbar-nav mr-auto">
                <li class="nav-item"><a class="nav-link" href="{% url 'news:list' %}">&nbsp;&nbsp;首页</a></li>&nbsp;&nbsp;
                <li class="nav-item"><a class="nav-link" href="{% url 'articles:list' %}">文章</a></li>&nbsp;&nbsp;
{#                <li class="nav-item"><a class="nav-link" href="{% url 'qa:unanswered_q' %}">问答</a></li>&nbsp;&nbsp;#}
{#                <li class="nav-item"><a class="nav-link" href="{% url 'messager:messages_list' %}">私信</a></li>&nbsp;&nbsp;#}
{#                <li class="nav-item"><a class="nav-link" href="#">&nbsp;&nbsp;首页</a></li>&nbsp;&nbsp;#}
{#                <li class="nav-item"><a class="nav-link" href="#">文章</a></li>&nbsp;&nbsp;#}
                <li class="nav-item"><a class="nav-link" href="{% url 'qa:unanswered_q' %}">问答</a></li>&nbsp;&nbsp;
                <li class="nav-item"><a class="nav-link" href="{% url 'messager:messages_list' %}">私信</a></li>&nbsp;&nbsp;

            </ul>

            <form role="search" action="{% url 'haystack_search' %}">
{#            <form role="search" action="#">#}
                <div class="input-group">
                    <input name="q" type="search" id="searchInput" class="form-control" placeholder="搜索" aria-label="Search">
                    <div class="input-group-append">
                        <button class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i></button>
                    </div>
                </div>
            </form>
            {% if request.user.is_authenticated %}
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false">
                            {% thumbnail request.user.picture "x40" as im %}
                                <img src="{{ im.url }}" style="border-radius: 50%;" alt="用户头像" class="user-image">
{#                                <img src="{{ im.url }}" style="border-radius: 50%;" alt="用户头像" class="user-image">#}
                            {% empty %}
                                <img src="{% static 'img/user.png' %}" height="40px" alt="没有头像"/>
                            {% endthumbnail %}
                            {{ request.user.nickname }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{% url 'users:detail' request.user.username %}">
{#                            <a class="dropdown-item" href="#">#}
                                <i class="fa fa-cogs fa-fw" aria-hidden="true"></i> 设置</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{% url 'account_logout' %}">
{#                            <a class="dropdown-item" href="#">#}
                                <i class="fa fa-sign-out fa-fw" aria-hidden="true"></i> 退出</a>
                        </div>
                    </li>
                </ul>
            {% endif %}
        </div>
    </div>
</nav>
<div class="mb-3"></div>
<div class="container">
    {% if messages %}
        {% for message in messages %}
            <div id="messages" class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% block content %}{% endblock content %}
</div>
<!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<!-- Required by Bootstrap v4 -->
{% compress js %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>
    <!-- Your stuff: Third-party javascript libraries go here -->
    <script src="{% static 'js/jquery-ui.min.js' %}" type="text/javascript"></script>
    <!-- place project specific Javascript in this file -->
{#    <script src="{% static 'js/zanhu.js' %}" type="text/javascript"></script>#}
{#    <script src="{% static 'js/websocketbridge.js' %}" type="text/javascript"></script>#}
    <script type="text/javascript">
        const currentUser = "{{ request.user.username }}";
    </script>
    <script src="{% static 'js/reconnecting-websocket.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/notifications.js' %}" type="text/javascript"></script>
    {% block js %}{% endblock js %}
{% endcompress %}

</body>

<!-- /.container -->
</html>
